import React from 'react'
import styles from './index.module.css'
import headImg from '../../assets/golive/pic_tx.png'
import {withRouter, RouteComponentProps} from 'react-router-dom';
import {connect} from 'react-redux'
import {Dispatch} from "redux";
import {StateType} from "../../redux/reducers/user";


interface Props extends RouteComponentProps {
    user: StateType
}

class Index extends React.Component<Props> {
    render() {
        const {history, user} = this.props;

        return (
            <div>
                <div className={styles.bgImg}>
                    <img src={headImg} alt="" style={{
                        width: '100px',
                        height: '100px'
                    }}/>
                </div>

                <div className={styles.card} style={{padding: '10px', textAlign: 'center', fontWeight: 600}}>
                    {user.nickname}
                </div>

                <div className={styles.card}>
                    <div onClick={() => {
                        history.push('/orders');
                    }}>
                        <div className={styles.item}><i className={"iconfont icon-shopping-fill"}/> 我的订单</div>
                        <i className={`iconfont icon-right ${styles.right}`}/>
                    </div>
                    <div onClick={() => {
                        history.push('/mine/addresses');
                    }}>
                        <div className={styles.item}><i className={"iconfont icon-apartment"}/> 收货地址管理</div>
                        <i className={`iconfont icon-right ${styles.right}`}/>
                    </div>
                    <div onClick={() => {
                        history.push('/mine/coupons');
                    }}>
                        <div className={styles.item}>
                            <i className={"iconfont icon-moneycollect-fill"}/>优惠卷/抵用卷
                        </div>
                        <i className={`iconfont icon-right ${styles.right}`}/>
                    </div>
                </div>

                <div className={styles.card}>
                    <div onClick={() => {
                        history.push('/mine/collect');
                    }}>
                        <div className={styles.item}><i className={"iconfont icon-heart"}/> 我的收藏</div>
                        <i className={`iconfont icon-right ${styles.right}`}/>
                    </div>
                    <div onClick={() => {
                        history.push('/mine/browse');
                    }}>
                        <div className={styles.item}><i className={"iconfont icon-file-text-fill"}/>浏览记录</div>
                        <i className={`iconfont icon-right ${styles.right}`}/>
                    </div>
                </div>
            </div>
        );
    }
}


export default connect((state: Props) => ({
    user: state.user
}), (dispatch: Dispatch) => ({
    dispatch
}))(withRouter(Index))
